<!--  -->
<template>
  <div class="img-zoom">

    <div v-show="showImg === 0" class="img-range">
      <img class="img-zoom-con" :src="imgZoomData.imgZoom" alt="">
    </div>

    <slot v-show="showImg === 1" name="imgLeft"></slot>

    <div class="right-content">
      <img class="content-bg" :src="require('_as/gaikuang-new.png')" alt="">
      <div class="title">{{imgZoomData.title}}</div>
      <span class="content">{{imgZoomData.contentSpan}}</span>
      <div class="btn" @click="toImgZoomDetails(imgZoomData)">
        <img style="width:16px; height: 16px; marginRight: 10px" :src="require('_as/gaikuang-1.png')" alt="">
        <span>查看详情 ></span>
      </div>
    </div>

    <slot v-show="showImg === 1" name="imgRight"></slot>

  </div>
</template>

<script>
export default {
  props: {
    imgZoomData: {
      type: Object,
      default: () => {}
    },
    showImg: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    toImgZoomDetails (imgZoomData) {
      this.$emit('toImgZoomDetails', imgZoomData)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.img-zoom {
  width 100%
  min-height 410px
  margin-bottom 60px
  position relative
  display flex
  justify-content center
  align-items center
}
.img-range {
  border-radius 50%
  overflow hidden
  width 400px
  height 400px
  line-height 400px
  .img-zoom-con {
    overflow hidden
    width 400px
    height 400px
    transition transform 1s
    &:hover {
      transform scale(1.2)
    }
  }
}

/** 方法二 animate */

// img:hover {
//   animation imgScale 2s
// }
// @keyframes imgScale {
//   from {
//     width 200px
//     height 200px
//   }
//   to {
//     width 240px
//     height 240px
//   }
// }

.right-content {
  display flex
  flex-direction column
  justify-content center
  align-items flex-start
  margin-left 90px
  width 366px
  height 300px
  position relative
  .content-bg {
    position absolute
    top 10px
    left -40px
  }
  .title {
    font-size 24px
    padding 0 0 30px
  }
  .content {
    line-height 1.5
    height 92px
    width 100%
    overflow hidden
    text-align left
    overflow hidden
    text-overflow ellipsis
    white-space: unset
    display -webkit-box
    -webkit-line-clamp 4
    -webkit-box-orient vertical
    // white-space: nowrap;
    overflow: hidden
    display: -webkit-box
    display: -moz-box
    display:block
    text-overflow: ellipsis
    -webkit-box-orient: vertical
    -moz-box-orient: vertical
    -webkit-line-clamp: 4
  }
  .btn {
    display flex
    align-items center
    position absolute
    right 0
    bottom 0
    &:hover {
      color red
      cursor default
    }
  }
}
</style>
